<template>
    <div ref="BookPage" class="all">
      <img src="static/images/mommy_school_marketing.png" alt="" class="image">
      <a href="https://kksapph5.kekeshi.com/#/mommySchoolMarketing?token=a125dss3f4c5d">
        <div class="mommy_school_btn">进入妈咪成长课堂</div>
      </a>
    </div>
</template>

<script>
    export default {
        name: "MommySchoolMarketing",
      data(){
          return{
            clientHeight: '',
          }
      },
      methods: {
        changeFixed(clientHeight) {
          this.$refs.BookPage.style.height = clientHeight + 'px';
        },
      },
      mounted() {
        // 获取浏览器可视区域高度
        this.clientHeight =   `${document.documentElement.clientHeight}`;          //document.body.clientWidth;
        //console.log(self.clientHeight);
        window.onresize = function temp() {
          this.clientHeight = `${document.documentElement.clientHeight}`;
        };
      },
      watch: {
        // 如果 `clientHeight` 发生改变，这个函数就会运行
        clientHeight: function () {
          this.changeFixed(this.clientHeight)
        }
      },
    }
</script>

<style scoped>
  .all{
    width: 100%;
    height: auto;
    overflow-x: hidden;
  }
  .image{
    width: 100%;
  }
  .mommy_school_btn{
    position: fixed;
    bottom: 20px;
    width: 335px;
    height: 50px;
    background: #ff7d7d;
    color: white;
    border-radius: 10px;
    box-shadow: 0 2px 6px 0 #606060;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    left: calc((100% - 335px) / 2);
  }
</style>
